<script lang="ts" setup>
import MenuAPI from '@/api/system/menu';
import { useTableSearch } from './hooks/use-table-search';
import { IDataItem, useTableColumnsConfig } from './hooks/use-table-columns-config';

defineOptions({ name: 'TemplateList' });

const params = ref({ name: '' });
const tableData = ref<IDataItem[]>([]);
const tableLoading = ref(false);

const handleSearch = async () => {
  try {
    tableLoading.value = true;
    const res = await MenuAPI.getList({ keywords: params.value.name });
    tableData.value = res.data as IDataItem[];
  } catch (err) {
    console.error(err);
  } finally {
    tableLoading.value = false;
  }
};
const handleReset = () => {
  params.value.name = '';
  handleSearch();
};

const handleDelete = async (row: IDataItem) => {
  await ElMessageBox.confirm(`是否删除[${row.name}]？`, '删除', { type: 'warning' });
  ElMessage.success('操作成功');
  handleSearch();
};
const handleCreate = () => {};
const handleEdit = () => {};

const { searchConfig } = useTableSearch();
const { columns } = useTableColumnsConfig({ handleDelete, handleCreate, handleEdit });

onMounted(handleSearch);
</script>

<template>
  <AppPage>
    <template #fheader>
      <SearchArea v-model="params" :config="searchConfig" @handleReset="handleReset" @handleSearch="handleSearch" />
    </template>
    <template #main="{ height }">
      <ProTable row-key="id" :data="tableData" :columns="columns" :border="false" :loading="tableLoading" />
    </template>
  </AppPage>
</template>
